import React,{useState} from 'react';
import {connect} from 'react-redux';
import {categoryTab} from '../store/actions';
import style from './Slider.module.scss';
interface Iprops{
    slideList:Array<object>,
    changeTab:(id:number)=>void,
    prop:object,
    cb:()=>void
}
const Slider:React.FC<Iprops> = props=>{
    console.log('slider组件')
    const [tabIndex,setTabIndex] = useState(0);
    const change = (item:{[key:string]:any},index:number)=>{
        setTabIndex(index);
        props.changeTab(item.id)
    }
    return <div className={style.slider}>
        {
            props.slideList.map((item:any,index:number)=>{
                return <div 
                            className={[style.item,index===tabIndex?style.active:""].join(" ")} 
                            key={item.id}
                            onClick={()=>change(item,index)}
                            >{item.name}
                    </div>
            })
        }
    </div>
}
const mapDispatchToProps=(dispatch:Function)=>{
    return {
        changeTab:(id:number)=>{
            dispatch(categoryTab(id))
        }
    }
}
export default connect(null,mapDispatchToProps)(Slider)
